<template>
    <div>
        <pagetitle></pagetitle>
        <el-card class="pageCard">
            <div class="container">
                <div class="userHeaderImgBox">
                    <!-- <el-image class="userHeaderImg" v-if="userInfo.pic" :src="userInfo.pic" :preview-src-list="[userInfo.pic]" fit="cover"> </el-image> -->
                    <!-- <el-image class="userHeaderImg" v-else :src="require('@/assets/image/userinfoimg.png')" fit="cover"></el-image> -->
                    <uploadFile
                        class="userHeaderImg"
                        :fileUrl="userInfo.pic ? userInfo.pic : require('@/assets/image/userinfoimg.png')"
                        :imgType="imgType"
                        :key="imgType"
                        @callBack="uploadFiles"
                        tableItem="pic"
                        width="80px"
                        height="80px"
                        :showIconOrText="false"
                    ></uploadFile>
                    <div class="names text-overflow1" :title="userInfo.nickName">
                        {{ userInfo.nickName }}
                    </div>
                </div>
                <div class="userInfoForm">
                    <div>
                        <div class="formTitle">
                            <div class="formTitleText">个人基本信息</div>
                            <div class="formTitleNull"></div>
                            <div class="formTitleTextTip" @click="topages('/user/mymanagement/accountsecurity')">前往管理</div>
                        </div>
                        <div class="formItem">
                            <div class="itemName">账户信息：</div>
                            <div class="itemMsg">{{ userInfo.nickName }}</div>
                            <div class="itemHanld"></div>
                        </div>
                        <div class="formItem">
                            <div class="itemName">手机号：</div>
                            <div class="itemMsg">{{ cutOutPhone(userInfo.phoneNum) }}</div>
                            <div class="itemHanld"></div>
                        </div>
                        <div class="formItem">
                            <div class="itemName">注册时间：</div>
                            <div class="itemMsg">{{ userInfo.createTime.split(" ")[0] }}</div>
                            <div class="itemHanld"></div>
                        </div>
                        <div class="formItem">
                            <div class="itemName">实名认证：</div>
                            <div class="itemMsg">
                                <span class="without" v-if="userInfo.certified == '1'">认证中</span>
                                <span class="succeed" v-if="userInfo.certified == '2'">已认证</span>
                                <span class="without" v-if="userInfo.certified == '0'">未认证</span>
                                <span class="without" v-if="userInfo.certified == '-1'">认证失败</span>
                            </div>
                            <div class="itemHanld" @click="topages('/user/mymanagement/certificateauth')">{{ userInfo.certified == "0" ? "去" : userInfo.certified == "1" ? "查看" : "修改" }}认证</div>
                        </div>
                        <div class="formItem" style="align-items: flex-start; line-height: 32px">
                            <div class="itemName">联系地址：</div>
                            <div v-if="userAddress">
                                <!-- <div style="margin-bottom: 20px" v-if="newAddress.length > 0">
                                    <div v-for="(tag, index) in newAddress" :key="index">
                                        <el-tag closable>
                                            {{ tag.valueText }}
                                        </el-tag>
                                    </div>
                                </div> -->
                                <div style="display: flex; justify-content: flex-start; align-items: center">
                                    <addRess style="width: 270px; margin-right: 20px" :value="newAddress ? newAddress.keyText : ''" :getAreaData="getAreaData"></addRess>
                                    <el-button type="primary" style="margin-right: 20px" @click="postNewAddress">确定</el-button>
                                </div>
                                <el-input v-model="detailedAddress" style="width: 270px" placeholder="请输入详细地址" />
                            </div>
                            <div v-else>
                                <div class="itemMsg" v-if="userInfo.addressArea">{{ JSON.parse(userInfo.addressArea).valueText }}/{{ userInfo.address }}</div>
                                <div class="itemMsg" v-else>
                                    <span class="withoutaddr">尚未设置联系地址</span>
                                </div>
                            </div>
                            <div class="itemHanld" v-if="userAddress" @click="setAddress">取消</div>
                            <div class="itemHanld" v-else @click="setAddress">{{ userInfo.addressArea ? "修改" : "设置" }}联系地址</div>
                        </div>
                        <div class="hr"></div>
                    </div>
                    <div>
                        <div class="formTitle">
                            <div class="formTitleText">主团队信息</div>
                            <div class="formTitleNull"></div>
                            <div class="formTitleTextTip">前往管理</div>
                        </div>
                        <div v-if="manTeams">
                            <div class="formItem">
                                <div class="itemName">团队名称：</div>
                                <div v-if="mainTeamCutSelect" style="width: 350px; margin-right: 20px">
                                    <el-select v-model="selectCompany" placeholder="请选择团队" size="small" style="width: 200px; margin-right: 12px" @change="selectChange">
                                        <el-option v-for="item in teamLists" :key="item.teamId" :label="item.teamName" :value="item.teamId" />
                                    </el-select>
                                    <el-button type="primary" size="small" @click="setMainTeam">确定</el-button>
                                    <el-button type="primary" size="small" @click="cutTeams">取消</el-button>
                                </div>
                                <div class="itemMsg" v-else>{{ manTeams.teamName }}</div>
                                <div class="itemHanld" @click="cutTeams">切换团队</div>
                            </div>
                            <div class="formItem">
                                <div class="itemName">加入时间：</div>
                                <div class="itemMsg">{{ manTeams.createTime }}</div>
                                <div class="itemHanld"></div>
                            </div>
                            <div class="formItem">
                                <div class="itemName">所属部门：</div>
                                <div class="itemMsg">{{ manTeams.departmentName }}</div>
                                <div class="itemHanldTip">*我在团队中的所属部门</div>
                            </div>
                            <div class="formItem">
                                <div class="itemName">所属岗位：</div>
                                <div class="itemMsg">{{ manTeams.positionName }}</div>
                                <div class="itemHanldTip">*我在团队中的岗位</div>
                            </div>
                            <div class="formItem">
                                <div class="itemName">团队认证：</div>
                                <div class="itemMsg">
                                    <span class="without" v-if="manTeams.certified != 2">{{ manTeams.certified == 1 ? "认证中" : "未认证" }}</span>
                                    <span v-else>已认证</span>
                                </div>
                                <div class="itemHanld"></div>
                            </div>
                            <div class="formItem">
                                <div class="itemName">组织机构类型：</div>
                                <div class="itemMsg">{{ manTeams.type }}</div>
                                <div class="itemHanldTip">*参考标准：GB/T 20091-2006 组织机构类型</div>
                            </div>
                            <div class="formItem" style="align-items: flex-start">
                                <div class="itemName">团队行业：</div>
                                <div style="width: 370px">
                                    <div class="itemMsg" v-for="(item, index) in manTeams.industrialClassificationList" :key="index">
                                        {{ item.industrialName }}
                                    </div>
                                </div>
                                <div class="itemHanldTip">*参考标准：GB/T 4754—2017 国民经济行业分类</div>
                            </div>
                        </div>

                        <div class="formItem" v-else>
                            <div class="itemName">暂无团队信息</div>
                        </div>
                        <div class="hr"></div>
                    </div>
                    <div class="outLoginBox">
                        <div class="boxTitle">退出云上农场业务</div>
                        <div class="boxtip">如果您暂时不再使用云上农场业务，可以“退出登录”，所有数据将会自动保存。<br />如果想要注销云上农场帐号，请前往云上农场帐号中心的“帐号与安全”注销。</div>
                        <div class="outLoginBtn" @click="loginOut">退出登录</div>
                    </div>
                </div>
            </div>
        </el-card>
    </div>
</template>
<script lang="ts" setup>
import { ref, computed, reactive } from "vue";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
import { outLogin } from "@/api/auth";
import { ElMessage } from "element-plus";
import { updateUsersAddress, getUserInfo, editorUserInfo } from "@/api/user";
import { setMainTeams, teamList } from "@/api/team";
const store = useStore();
const router = useRouter();
// let companyInfos: any = ref({});

const userInfo: any = computed((e: any) => {
    return store.getters.userInfo;
});
// const userInfo: any = ref("");
getUserInfo().then((res: any) => {
    store.commit("setUserInfo", res.data);
    userInfo.value = res.data;
});
// 修改头像
const imgType = ref("1");
if (!userInfo.value.pic) {
    imgType.value = "2";
}
const uploadFiles = (path: string, doc: string) => {
    userInfo.value[doc] = path;
    // store.commit("setUserInfo", userInfo.value);
    console.log(path, doc);
    editorUserInfo({
        pic: path,
        userId: store.getters.userInfo.userId,
    }).then((res: any) => {
        ElMessage.success("修改成功");
        getUserInfo().then((res: any) => {
            store.commit("setUserInfo", res.data);
            userInfo.value = res.data;
            imgType.value = "1";
        });
    });
};
// 主团队信息
const manTeams: any = ref(null);
const teamLists: any = computed((e: any) => {
    return store.getters.teamList;
});
const selectCompany: any = ref("");
setTimeout(() => {
    if (teamLists.value.length > 0) {
        teamLists.value.forEach((v: any) => {
            if (v.isMainTeam == 1) {
                manTeams.value = v;
                selectCompany.value = v.teamId;
                console.log(manTeams);
            }
        });
    }
}, 100);
// 切换主团队
const mainTeamCutSelect: any = ref(false);
const cutTeams = () => {
    mainTeamCutSelect.value = !mainTeamCutSelect.value;
};
const selectChange = () => {
    let array = store.getters.teamList;
    array.forEach((v: any) => {
        console.log(v);
        if (v.teamId == selectCompany.value) {
            manTeams.value = v;
        }
        // manTeams.value = v;
    });
};
const setMainTeam = () => {
    setMainTeams(selectCompany.value).then((res: any) => {
        ElMessage.success("切换成功");
        store.commit("selectTeam", selectCompany.value);
        mainTeamCutSelect.value = false;
        teamList({
            pageNum: 1,
            pageSize: 100,
        }).then((resp: any) => {
            store.commit("setTeamList", resp.data.list);
            if (resp.data.list.length > 0) {
                resp.data.list.forEach((v: any) => {
                    if (v.isMainTeam == 1) {
                        manTeams.value = v;
                    }
                });
            }
        });
    });
};
// 退出登陆
const loginOut = () => {
    outLogin().then((res) => {
        router.replace("/login");
        store.commit("setToken", "");
        sessionStorage.clear();
    });
};
// 设置用户联系地址
const userAddress = ref(false);
const newAddress: any = ref(null);
const detailedAddress = ref("");
const setAddress = () => {
    userAddress.value = !userAddress.value;
    if (userAddress.value) {
        detailedAddress.value = userInfo.value.address;
        newAddress.value = JSON.parse(userInfo.value.addressArea);
    }
};
const getAreaData = (addr: any) => {
    newAddress.value = addr;
};
const postNewAddress = () => {
    if (newAddress.value == null) {
        ElMessage.error("请选择地址");
        return;
    }
    if (detailedAddress.value == "") {
        ElMessage.error("请输入详细地址地址");
        return;
    }
    // console.log(newAddress.value.valueText, detailedAddress.value);
    updateUsersAddress({
        addressArea: JSON.stringify(newAddress.value),
        address: detailedAddress.value,
    }).then((res: any) => {
        ElMessage.success("设置成功");
        userAddress.value = false;
        getUserInfo().then((res: any) => {
            store.commit("setUserInfo", res.data);
        });
    });
};
/**
 * 手机号码截取
 * @param phone 手机号码
 */
const cutOutPhone = (phone: string) => {
    if (!phone) {
        return;
    }
    const pn = phone.replace(/(\d{3})\d{4}(\d{4})/, "$1****$2");
    return pn;
};
/**
 * 跳转到指定页面
 * @param url 要跳转的路径
 */
const topages = (url: any) => {
    router.push(url);
};
</script>
<style lang="scss" scoped>
.container {
    display: flex;
    justify-content: flex-start;
    padding-left: 60px;
    padding-top: 10px;
    align-items: flex-start;
    width: 100%;
    padding-bottom: 40px;
    .userHeaderImgBox {
        padding-right: 80px;
        font-size: 12px;
        .userHeaderImg {
            width: 80px;
            height: 80px;
            border-radius: 100%;
            margin-bottom: 20px;
        }
        .names {
            // width: 80px;
            text-align: center;
        }
    }
    .userInfoForm {
        width: 100%;
        padding-right: 30px;
        .formTitle {
            margin-bottom: 20px;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            .formTitleText {
                font-weight: 500;
                color: #333333;
                width: 145px;
            }
            .formTitleNull {
                width: 370px;
            }
            .formTitleTextTip {
                font-size: 12px;
                color: #299c37;
                cursor: pointer;
            }
        }
        .formItem {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            font-size: 12px;
            margin-bottom: 20px;
            .itemName {
                width: 85px;
                color: #666666;
                text-align: right;
                margin-right: 70px;
                white-space: nowrap;
            }
            .itemMsg {
                color: #333333;
                width: 370px;
                .without {
                    color: #f80000;
                }
                .withoutaddr {
                    color: #999999;
                }
                .succeed {
                    color: #299c37;
                }
            }
            .itemHanld {
                color: #299c37;
                cursor: pointer;
            }
            .itemHanldTip {
                color: #999999;
                white-space: nowrap;
            }
        }
        .hr {
            width: 100%;
            border-top: 1px dashed #cccccc;
            margin-bottom: 20px;
            margin-top: 30px;
        }
        .outLoginBox {
            padding-top: 10px;
            .boxTitle {
                font-size: 14px;
                font-weight: 500;
                color: #000000;
                margin-bottom: 20px;
            }
            .boxtip {
                font-size: 12px;
                color: #666666;
                margin-bottom: 20px;
                line-height: 26px;
            }
            .outLoginBtn {
                width: 111px;
                height: 30px;
                border-radius: 3px 3px 3px 3px;
                opacity: 1;
                border: 1px solid #299c37;
                text-align: center;
                line-height: 30px;
                color: #333333;
                font-size: 14px;
                cursor: pointer;
            }
        }
    }
}
</style>
